<template>
    <div class="w-footer">
        <van-tabbar v-model="active">
            <van-tabbar-item :icon="item.icon" :to="item.route" :info="index==2?(cartNum?cartNum:''):''"
                             v-for="(item,index) in tabberList" :key="index">
                {{item.title}}
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    import {mapGetters} from "vuex"

    export default {
        name: "Footer",
        data() {
            return {
                active: 0,
                tabberList: [
                    {icon: 'home-o', route: '/home', title: '首页'},
                    {icon: 'bars', route: '/category', title: '分类'},
                    {icon: 'cart-o', route: '/shopping', title: '购物车'},
                    {icon: 'contact', route: '/mine', title: '我的'}
                ]
            }
        },
        props: {
            route: {
                type: Object,
                default: {}
            }
        },
        computed: {
            ...mapGetters(['cartNum'])
        },
        watch: {
            route: function (route) {
                this.highLight()
            }
        },
        created() {
            this.highLight()
        },
        methods: {
            highLight() {
                this.tabberList.forEach((item, attr) => {
                    if (item.route == this.route.path) this.active = attr
                })

            }
        }
    }
</script>

<style lang="scss" scoped>

</style>
